<template>
  <div class="container">
    <h1 style="margin-bottom: 20px; text-align: center;">管理员登录</h1>
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules"
             label-width="auto" class="demo-ruleForm">
      <el-form-item label="用户名" prop="pass" style="font-weight: bold; width: 500px;">
        <el-input v-model="ruleForm.pass" type="text" autocomplete="off" style="opacity:0.8"/>
      </el-form-item>
      <el-form-item label="密码" prop="checkPass" style="font-weight: bold;width: 500px;">
        <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" style="opacity:0.8"/>
      </el-form-item>
      <el-form-item label="验证码" style="font-weight: bold;">
        <el-input type="text" v-model="ruleForm.captchaInput"
                  @keyup.enter="login"
                  autocomplete="off" style="opacity:0.8 ;width: 300px;"/>
        <el-image style="width: 120px; height: 38px" :src="captchaImageBase64Data" @click="getCaptcha"/>
      </el-form-item>
      <el-form-item style="margin: 30px 0  20px 100px; display: flex;">
        <el-button type="primary" @click="submitForm" size="large" plain>登录</el-button>
        <el-button @click="resetForm" size="large" plain>重置</el-button>
        <el-button type="info" size="large" plain>
          <RouterLink to="/user/login">
            用户登录
          </RouterLink>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import {ElMessage} from 'element-plus';
import adminApi from '@/api/adminApi.js';
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {useRouter} from 'vue-router';
import {useTokenStore} from '@/stores/token.js';//使用store
const tokenStore = useTokenStore();

const router = useRouter();

const ruleFormRef = ref<FormInstance | null>(null);

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('管理员用户名不能为空'));
  } else {
    if (ruleForm.pass !== '') {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField('checkPass');
    }
    callback();
  }
}

const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('登录密码不能为空'));
  } else {
    callback();
  }
}

const ruleForm = reactive({
  pass: '',
  checkPass: '',
  key: '',
  captchaInput: '',
});
const captchaImageBase64Data = ref("");
const rules = reactive<FormRules>({
  pass: [{validator: validatePass, trigger: 'blur'}],
  checkPass: [{validator: validatePass2, trigger: 'blur'}],
});

const submitForm = () => {
  ruleFormRef.value?.validate((valid) => {
    if (valid) {
      login();
    } else {
      ElMessage.error('请填写管理员用户名和密码');
    }
  });
}

const resetForm = () => {
  ruleFormRef.value?.resetFields();
}


// 登录
function login() {
  adminApi.login({
    username: ruleForm.pass, password: ruleForm.checkPass, key: ruleForm.key, captchaInput: ruleForm.captchaInput
  })
      .then(resp => {
        console.log(resp);
        if (resp.code == 10000) {
          ElMessage.success({
            message: resp.msg,
            duration: 1200,
            onClose: () => {
              sessionStorage.setItem("token", resp.data)
              tokenStore.update(resp.data)
              router.push('/admin/index');
            }
          });
        } else {
          ElMessage.error(resp.msg);
        }
      });
}
function getCaptcha() {
  adminApi.captcha()
      .then(resp => {
        ruleForm.key = resp.data.key;
        captchaImageBase64Data.value = resp.data.captchaImageBase64Data
      })
}
getCaptcha()
</script>

<style scoped>
.container {
  width: 500px;
  height: 250px;
  border: 2px solid black;
  border-radius: 5px;
  padding: 0 50px 50px;
  margin: 150px auto auto;
  background-image: url('D:/code/project2/mall/front/src/assets/banner/20211021142554_2740.jpg');
  background-size: cover;
  /* 确保图片覆盖整个容器 */
  background-position: center;
  /* 将图片居中显示 */
  background-repeat: no-repeat;
  /* 避免图片重复 */
}
</style>